﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Editable 控制单元格可编辑 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    

</head>
<body>
    <h1>Editable 控制单元格可编辑</h1>
    <p>本例演示：如果已婚，则不允许编辑性别</p>
  
    <div id="datagrid1" class="mini-datagrid" style="width:300px;height:250px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees" idField="id"
        allowResize="true" pageSize="20" 
        allowCellEdit="true" allowCellSelect="true"  oncellbeginedit="OnCellBeginEdit"
    >
        <div property="columns">
            <div type="indexcolumn"></div>
            <!--ComboBox：本地数据-->         
            <div type="comboboxcolumn" autoShowPopup="true" field="gender" width="100" allowSort="true"  align="center" headerAlign="center">性别
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>                
            </div>
            <div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div>
        </div>
    </div>
    <script type="text/javascript">
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];

        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();


        //////////////////////////////////////////////////////
        function OnCellBeginEdit(e) {
            var record = e.record, field = e.field;
            if (field == "gender" && record.married == "1") {
                e.cancel = true;    //如果已婚，则不允许编辑性别
            }
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        <p>通过监听处理cellbeginedit事件，可以拦截并取消单元格编辑。</p>
    </div>
</body>
</html>